<template>
  <div class="mask" ref="mask" @click="hideMask">
       <swiper  class="swiper" ref="swiper">
        <swiper-slide v-for="item,i in imageList" class="swiper-item" :key="i">
          <img :src="item" alt="">
        </swiper-slide>
       </swiper>
    </div>
</template>

<script>
export default {
  props:["imageList"],
  data(){
    return{
       iHeight:0,
    }
  },
   methods:{
    getiHeight(){
      this.iHeight = document.documentElement.clientHeight +"px";
      if(this.$refs.mask){
        this.$refs.mask.style.height = this.iHeight
      }
    },
    hideMask(){
      this.$store.commit("showMask",false)
    }
  },
  mounted(){
    this.getiHeight()
    window.onresize =()=>{
      this.getiHeight()
    }
 }
}
</script>

<style lang="less" scoped>
   .mask{
    width: 100%;
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
  }
  .swiper{
    width: 100%;
    position: absolute;
    top:50%;
    height: 320/16rem;
    transform: translateY(-50%);
 img{
     width: 100%;
      height: 100%;
    }
  }
     

</style>